<template>
  <div class="repair-container">
    <div class="repair-table-header">
      <div class="repair-table-header-title">报修TOP10统计</div>
      <div class="repair-table-header-repairsum">累计报修次数（次）：{{repairTotalCount}}</div>
    </div>
    <div class="repair-table-content">
      <el-table :data="repairTop10" border style="width: 100%">
        <el-table-column prop="indexNum" label="序号" width="100px"></el-table-column>
        <el-table-column prop="brandModel" label="设备品牌类型型号"></el-table-column>
        <el-table-column prop="sn" label="SN号"></el-table-column>
        <el-table-column prop="repairCount" label="报修次数（次）"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    repairTop10: Array
  },
  methods: {},
  created () {},
  computed: {
    /**
     * 计算累计保修次数
     */
    repairTotalCount () {
      return this.repairTop10.reduce(
        (preTotal, repairData) => preTotal + repairData.repairCount,
        0
      )
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.repair-container {
  padding: 10px;
}
.repair-table-header {
  font-size: 12px;
}
.repair-table-header-repairsum {
  margin-right: 10px;
  margin-bottom: 10px;
  float: right;
}
.repair-table-header-title {
  margin-bottom: 10px;
  float: left;
}
</style>
